<template>
  <view
    class="member-card"
    :style="{
      marginBottom,
    }"
    @click.stop="openCard"
  >
    <view class="info" :style="{ height: fixedHeight ? '160rpx' : 'auto' }">
      <view class="info-logo">
        <TImage
          :src="item.leadingAvatar"
          width="128rpx"
          height="160rpx"
          border-radius="10rpx"
          error-img-type="person"
        />
      </view>
      <view class="info-content">
        <view class="disFlxAC">
          <text class="name text-overflow-1">{{ item.leadingName }}</text>
          <text v-if="item.levelName" class="social-levelName text-overflow-1">
            {{ item.levelName }}
          </text>
        </view>
        <view
          class="info-content--mid"
          style="gap: 10rpx"
          :style="{ flexWrap: fixedHeight ? 'nowrap' : 'wrap' }"
          v-if="item.companyName"
        >
          <view :class="[fixedHeight ? 'disFlxAC' : '']">
            <image
              v-if="item.applyType === ApplyTypeEnum.UNIT"
              class="member-icon"
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/member-icon-1.png"
              style="vertical-align: bottom"
            />
            <text class="company-name" :class="[fixedHeight ? 'text-overflow-1' : '']">
              {{ item.companyName }}
            </text>
          </view>
          <text class="position text-overflow-1">{{ item.leadingSocialPosition }}</text>
        </view>
        <scroll-view
          v-if="item.companyMainBusinesList && item.companyMainBusinesList.length"
          :enhanced="true"
          :show-scrollbar="false"
          scroll-x
          enable-flex
          style="width: 100%"
        >
          <view class="card-tags">
            <template v-for="(tag, i) in item.companyMainBusinesList" :key="i">
              <text class="tag-item">{{ tag }}</text>
            </template>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="card-bottom">
      <view class="card-source" v-if="!hideSource">
        <text>{{ item.orgTenantName }}</text>
        <text class="ali-icon">&#xe66b;</text>
      </view>
      <view
        v-if="item.currentDistance"
        class="distance"
        @click.stop="openLocation(item.companyAddressStr)"
      >
        <text class="ali-icon">&#xe600;</text>
        <text>{{ kmUnit(Number(item.currentDistance)) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type MemberContactsVoList } from '@/api/contactsMap/types';
  import { computed, type PropType } from 'vue';
  import { kmUnit } from '../utils';
  import TImage from '@/components/TImage/index.vue';
  import { useLocation } from '@/hooks/core/useLocation';
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { navigateTo } from '@/router';
  import { type MemberContactsVo } from '@/api/order/types';
  import { SourceTypeEnum } from '@/enums/contactsEnum';
  import { useUserStore, useUserStoreWithOut } from '@/store/modules/user';
  import { propTypes } from '@/utils/propTypes';
  import { isLogin, isNullOrUnDef } from '@/utils/is';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { Toast } from '@/utils';
  import { toSelectiveType } from '@/utils/dynamicConfig';
  import { storeToRefs } from 'pinia';

  const { contactsConfig } = useAppStoreWithOut();
  const { currentCocId } = storeToRefs(useUserStore());

  const props = defineProps({
    type: {
      type: String as PropType<'swiper' | 'list'>,
      default: 'list',
    },
    sourceType: Number as PropType<SourceTypeEnum>,
    item: {
      type: Object as PropType<MemberContactsVoList | MemberContactsVo>,
      required: true,
    },
    marginBottom: propTypes.string,
    fixedHeight: propTypes.bool.def(false),
  });

  const { tenantId } = useUserStoreWithOut();
  const { openLocation } = useLocation();

  const hideSource = computed(
    () => props.sourceType === SourceTypeEnum.INSIDE && props.item?.tenantId == tenantId,
  );

  /** 打开名片 */
  function openCard() {
    isLogin(() => {
      if (!isNullOrUnDef(props.sourceType)) {
        if (contactsConfig?.connectionDetailShow && !currentCocId.value) {
          // Toast('人脉详情暂未开放，查看请联系管理员');
          uni.showModal({
            title: '提示',
            content: '仅会员可查看人脉详情，请先成为会员',
            confirmText: '成为会员',
            confirmColor: '#2878FF',
            success: ({ confirm }) =>
              confirm &&
              toSelectiveType({
                linkUrl: 'selectiveType',
                isRedirectTo: false,
              }),
          });
          return;
        }
        navigateTo({
          name: 'personCard',
          options: {
            id: props.item.memberLeadingId,
          },
        });
      } else {
        navigateTo({ name: 'personCard', options: { id: props.item.memberLeadingId } });
      }
    });
  }
</script>

<style scoped lang="scss">
  .member-card {
    // border-radius: 30rpx;
    padding: 30rpx;
    padding-bottom: 0;
    background-color: #fff;

    .info {
      // height: 160rpx;
      display: flex;
      align-items: start;

      &-logo {
        width: 128rpx;
        flex-shrink: 0;
        position: relative;
        margin-right: 20rpx;
        background-color: #eee;
        border-radius: 10rpx;
      }

      &-content {
        height: inherit;
        flex: 1;
        width: calc(100% - 160rpx);

        .name {
          font-size: 32rpx;
          color: #333;
          font-weight: bolder;
        }

        .social-levelName {
          background-color: #f8edd7;
          border-radius: 10rpx;
          font-size: 22rpx;
          color: #333;
          padding: 4rpx 15rpx;
          margin-left: 16rpx;
          max-width: 300rpx;
        }

        &--mid {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          padding: 20rpx 0;
          .company-name {
            margin-left: 10rpx;
          }
          .position {
            color: #808080;
            white-space: nowrap;
          }
          .member-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 8rpx;
            flex-shrink: 0;
          }
        }

        .card-tags {
          display: flex;
          align-items: center;

          .tag-item {
            display: inline-block;
            white-space: nowrap;
            font-size: 24rpx;
            color: #808080;
            padding: 0 16rpx;
            background-color: #f5f5f5;
            // border: 1px solid #dddddd;
            border-radius: 6rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .card-bottom {
      height: 78rpx;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #aaabab;
      .card-source {
        flex: 1;
      }
      .distance {
        flex: 1;
        text-align: right;
      }
      .ali-icon {
        margin: 0 6rpx;
      }
    }
  }
</style>
